<template>
    <a-layout style="min-height: 100vh">
        <a-layout-sider v-model:collapsed="collapsed" collapsible>
            <div class="logo" />
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="changeRouter">
                <a-menu-item v-for="route in menuRoutes" :key="route.path">
                    <!--                    <icon-font :type="type" />-->
                    <component :is="route.meta.icon"/>
                    <span>{{route.meta.title}}</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: rgba(210,243,243,0.42);padding: 0 0 0 15px;">
                123
            </a-layout-header>
            <a-layout-content style="margin: 5px 5px;background: white">
                <router-view/>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script setup>
import {ref, watch} from 'vue';
import {getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance()
let collapsed = ref(false)
console.log(proxy.$router.options.routes)
let menuRoutes = proxy.$router.options.routes[1].children[0].children.filter(route => route.meta && route.meta.title)
proxy.$router.push(menuRoutes[0].path)
let selectedKeys = ref([menuRoutes[0].path])

import {createFromIconfontCN} from '@ant-design/icons-vue';
import userOutlined from "@ant-design/icons-vue/lib/icons/UserOutlined";
const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
// 这个获取到的可以直接咋界面上 使用<component is= "displayName"/> 进行使用
const iconCom = userOutlined.displayName
function changeRouter(data){
    console.log(data.key)
    proxy.$router.push(data.key)
}
</script>
<style>

</style>
